<template>

    <div class="form-container">
      <el-tabs type="border-card">
        <div>
          <p class="content-tit">征订审批</p>
          <div>
            <el-form :label-position="labelPosition" label-width="100px" :model="formData">
              <el-row type="flex" class="row-bg">
                <el-col :span="8">
                  <el-form-item label="征订申请人" size="mini" :required="true">
                    <el-input v-model="formData.certifyApplyName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="征订机构" size="mini" :required="true">
                    <el-select v-model="formData.tempCode" filterable placeholder="请选择征订机构编码">
                      <el-option
                        v-for="item in tempList"
                        :key="item.code"
                        :label="item.codeName"
                        :value="item.code">
                        <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="申请时间" size="mini" :required="true">
                    <el-date-picker v-model="formData.applyDate" type="date" placeholder="请输入申请时间" :format="'yyyy-MM-dd'"
                                    :value-format="'yyyy-MM-dd'">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div align="right">
              <el-button type="primary" @click="query" icon="el-icon-search">征订查询</el-button>
            </div>
          </div>
        </div>
        <div>
          <p class="content-tit">
            <span @click="isShow('isShowSingles')" v-if='isShowSingles'>-</span>
            <span @click="isShow('isShowSingles')" v-else>+</span>征订列表
          </p>
          <el-table :data="applyList" ref="userTable" @selection-change="handleSelectionChange" style="width: 100%"
                    class='table-common' :highlight-current-row="true" border
                    v-show="isShowSingles">
            <el-table-column label="#" checked="selectionData"
                             type="selection"
                             min-width="6%">
            </el-table-column>
            <el-table-column label="序号" type='index' min-width="8%" align="center"></el-table-column>
            <el-table-column prop="certifyApplyId" label="征订批次号" min-width="10%" align="center"></el-table-column>
            <el-table-column prop="certifyApplyName" label="申请人" min-width="8%" align="center"></el-table-column>
            <el-table-column prop="tempCode" label="征订机构" min-width="10%" align="center"></el-table-column>
            <el-table-column prop="state" label="征订单状态" min-width="10%" align="center"></el-table-column>
            <el-table-column prop="applyDate" label="申请时间" min-width="8%" align="center"></el-table-column>
            <el-table-column prop="applyDis" label="征订备注" min-width="16%" align="center"></el-table-column>
            <el-table-column label="操作" min-width="10%" align="center">
              <template slot-scope="scope">
                <el-button type="primary"
                           icon="el-icon-view"
                           @click="dialogTableVisible = true"
                           size="mini">详情
                </el-button>
                <el-dialog title="征订单证列表" :visible.sync="dialogTableVisible" width="86%" :append-to-body="true">
                  <el-table :data="certifysList" ref="certifysList" style="width: 100%"
                            class='table-common' :highlight-current-row="true" border>
                    <el-table-column label="序号" type='index' min-width="8%" align="center"></el-table-column>
                    <el-table-column prop="certifyId" label="单证编码" min-width="10%" align="center"></el-table-column>
                    <el-table-column prop="certifyName" label="单证名称" min-width="10%" align="center"></el-table-column>
                    <el-table-column prop="certifyEdition" label="单证版本" min-width="8%" align="center"></el-table-column>
                    <el-table-column prop="certifyType" label="单证类型" min-width="8%" align="center"></el-table-column>
                    <el-table-column prop="certifyOperType" label="业务类型" min-width="8%" align="center"></el-table-column>
                    <el-table-column prop="certifyStock" label="库存数量" min-width="8%" align="center"></el-table-column>
                    <el-table-column prop="certifyPrice" label="单证单价" min-width="8%" align="center"></el-table-column>
                    <el-table-column prop="certifyApplyNum" label="申请数量" min-width="8%" align="center"></el-table-column>
                    <el-table-column prop="updateCertifyApplyNum" label="上级调整数量" min-width="8%"
                                     align="center"></el-table-column>
                    <el-table-column prop="applyDate" label="申请时间" min-width="8%" align="center"></el-table-column>
                    <el-table-column prop="applyTempCode" label="申请机构" min-width="8%" align="center"></el-table-column>
                    <el-table-column prop="count" label="总价" min-width="8%" align="center"></el-table-column>
                  </el-table>
                  <div class="mar15 " align="right">
                    <el-pagination
                      @current-change="handleCurrentChange"
                      :current-page="publicPage.currentPage"
                      :page-size="publicPage.perPage"
                      layout="total, prev, pager, next, jumper"
                      :total="publicPage.totalSize">
                    </el-pagination>
                  </div>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
          <div class="mar15 " align="right" v-show="isShowSingles">
            <el-pagination
              @current-change="handleCurrentChangeSingle"
              :current-page="selfPage.currentPage"
              :page-size="selfPage.perPage"
              layout="total, prev, pager, next, jumper"
              :total="selfPage.totalSize">
            </el-pagination>
          </div>
        </div>
        <div>
          <p class="content-tit">征订审核</p>
          <div v-show="flag" ref="checkedApply">
            <el-form v-show="flag1" label-position="labelPosition" label-width="100px" :model="formData1">
              <el-row type="flex" class="row-bg">
                <el-col :span="8">
                  <el-form-item label="审批人" size="mini" :required="true">
                    <el-select v-model="formData1.checkedName" filterable placeholder="请选择征订机构编码" disabled="true">
                      <el-option
                        v-for="item in checkedList"
                        :key="item.code"
                        :label="item.codeName"
                        :value="item.code">
                        <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="审批时间" size="mini" :required="true">
                    <el-date-picker v-model="formData1.checkedDate" type="date" placeholder="请输入申请时间" :format="'yyyy-MM-dd'"
                                    :value-format="'yyyy-MM-dd'">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="审批结果" size="mini" :required="true">
                    <el-select v-model="formData1.result" filterable placeholder="请选择">
                      <el-option
                        v-for="item in isChecked"
                        :key="item.code"
                        :label="item.codeName"
                        :value="item.code">
                        <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row type="flex" class="row-bg">
                <el-col :span="16">
                  <el-form-item label="原因说明" size="mini">
                    <el-input type="textarea" rows="2" v-model="formData1.reason" ref="textarea"
                              max-length="50"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-steps :active="active" v-if="show" finish-status="success" align-center>
              <el-step title="征订申请 1" description="分公司初级单证管理员->征订申请"></el-step>
              <el-step title="征订汇总 2" description="分公司初级单证管理员->征订汇总"></el-step>
              <el-step title="征订审批 3" description="分公司高级单证管理员->征订审批"></el-step>
              <el-step title="征订复核 4" description="总公司初级单证管理员->征订复核"></el-step>
              <el-step title="征订确认 5" description="总公司高级单证管理员->征订确认"></el-step>
            </el-steps>
            <el-steps :active="active" v-else-if="!show" ref="step" finish-status="success" align-center>
              <el-step title="征订申请 1" description="支公司初级专员->征订申请"></el-step>
              <el-step title="征订审批 2" description="支公司高级专员->征订审批"></el-step>
              <el-step title="征订汇总 3" description="分公司初级单证管理员->征订汇总"></el-step>
              <el-step title="征订审批 4" description="分公司高级单证管理员->征订审批"></el-step>
              <el-step title="征订汇总 5" description="总公司初级单证管理员->征订汇总"></el-step>
              <el-step title="征订确认 6" description="总公司高级单证管理员->征订确认"></el-step>
            </el-steps>
            <div align="right">
              <el-button type="primary" @click="handleStep">提交</el-button>
            </div>
          </div>
        </div>
      </el-tabs>
  </div>
</template>

<script>
  export default {
    name: "card-plan-apply-checked",
    data() {
      return {
        show: false,
        flag: true,
        flag1: true,
        labelPosition: 'right',
        isShowSingles: true,
        dialogTableVisible: false,
        active: 1,
        isChecked: [{code: '1', codeName: '通过'}, {code: '2', codeName: '不通过'}],
        formData: {
          certifyEdition: 202001,
          certifyApplyName: '张三',
          applyDate: '2020-05-30',
          tempCode: '860101'
        },
        selfPage: {
          currentPage: 1,
          hasMore: true,
          perPage: 10,
          totalPage: 0,
          totalSize: 0
        },
        publicPage: {
          currentPage: 1,
          hasMore: true,
          perPage: 10,
          totalPage: 0,
          totalSize: 0
        },
        tempList: [
          {code: '86', codeName: '总部'}, {code: '8601', codeName: '分公司'},
          {code: '860101', codeName: '支公司'},
          {code: '86010101', codeName: '营销部'},
        ],
        applyList: [
          {
            certifyApplyId: 'AW20200530',
            certifyApplyName: '张三',
            certifyEdition: 202001,
            tempCode: '机构1',
            applyDate: '2020-05-30',
            receiver: '李四',
            phone: '',
            applyDis: ''
          },

        ],
        certifysList: [
          {
            certifyId: '010201',
            certifyName: '补充文件',
            certifyType: '有价单证',
            certifyEdition: 202001,
            certifyOperType: '契约',
            certifyStock: '0',
            certifyPrice: '0.2',
            applyTempCode: '机构1',
            certifyApplyNum: '200',
            updateCertifyApplyNum: '150',
            applyDate: '2020-05-23',
            count: '30'
          },
          {
            certifyId: '010202',
            certifyName: '财务补充文件',
            certifyType: '有价单证',
            certifyEdition: 202001,
            certifyOperType: '契约',
            certifyStock: '0',
            certifyPrice: '0.2',
            applyTempCode: '机构1',
            certifyApplyNum: '330',
            updateCertifyApplyNum: '300',
            applyDate: '2020-05-27',
            count: '60'
          },
        ],
        checkedList: [
          {code: 1, codeName: '支公司初级专员'},
          {code: 2, codeName: '支公司高级专员'},
          {code: 3, codeName: '分公司初级单证管理员'},
          {code: 4, codeName: '分公司高级单证管理员'},
          {code: 5, codeName: '总公司初级单证管理员'},
          {code: 6, codeName: '总公司高级单证管理员'},
        ],
        formData1: {
          checkedName: 1,
          checkedDate: '',
          result: '1',
        },

      }
    },
    methods: {
      isShow(val) {
        this[val] = !this[val]
      },
      handleSelectionChange(val) {
        this.selectionData = val;
      },
      handleCurrentChangeSingle(num) {
        this.selfFormData.pageNum = num
      },
      handleCurrentChange(num) {
        this.formData.pageNum = num
      },
      query() {
      },
      //选择征订信息，自动查询该记录是否，该角色可以审核 显示审批表单

      handleStep() {
        if (this.active++ > 5) this.active = 1;
        this.formData1.checkedName = this.active + 1;
        if (this.formData1.checkedName === 7) {
          this.formData1.checkedName = 6;
        }
      }
    }
  }
</script>

<style scoped>

</style>
